<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>修改用户信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
      body {
            margin: 0;
            padding: 0;
            font: 16px/20px microsft yahei;
            background: radial-gradient(200% 100% at bottom center, #DEB887, #bebebe 40%, #242f4e);
            background: radial-gradient(220% 105% at bottom center, #DEB887, #ad5757 40%, #242f4e);
            background-attachment: fixed;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
         }
        @keyframes rotate {
            0% {
                transform: perspective(400px) rotateZ(200deg) rotateX(-40deg) rotateY(0);
            }
            100% {
                transform: perspective(400px) rotateZ(200deg) rotateX(-40deg) rotateY(360deg);
            }
        }
        .stars {
            transform: perspective(500px);
            transform-style: preserve-3d;
            position: absolute;
            perspective-origin: 50% 100%;
            left: 50%;
            right: 20%;
            animation: rotate 90s infinite linear;
            top: 0;
        }
        .star {
            width: 2px;
            height: 2px;
            border-radius: 5px;
            background-color: whitesmoke;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .wrap {
            width: 100%;
            height: 100%;
            padding: 3% 0;
            position: fixed;
            opacity: 0.8;
            background: linear-gradient(to bottom right,#000000, #656565);
            background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
        }
        
        .container {
            width: 60%;
            margin: 0 auto;
        }
        .container h1 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 500;
        }
        .container input {
            width: 320px;
            display: block;
            height: 36px;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            line-height: 24px;
            margin: 32px auto;
            -webkit-transition: all 0s ease-in 0.1ms;
            -moz-transition: all 0s ease-in 0.1ms;
            transition: all 0s ease-in 0.1ms;
        }
        .container input[type="text"] , .container input[type="password"]  {
            background-color: #FFFFFF;
            font-size: 16px;
            color: #50a3a2;
        }
        .container input[type='submit'] {
            font-size: 16px;
            letter-spacing: 2px;
            color: #666666;
            background-color: #FFFFFF;
        }
    
        .wrap ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -20;
        }
        .wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            border-radius: 50%;
            box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),
            inset 0px 0px 5px rgba(0, 0, 0, .5),
            inset -3px -3px 5px rgba(0, 0, 0, .5),
            0 0 20px rgba(255, 255, 255, .75);
            background-color:rgba(255, 255, 255, 0.15);
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }
        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 11s;
        }
        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }
        .wrap ul li:nth-child(7) {
            left: 60%;
            width: 30px;
            height: 30px;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }
        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }
        .wrap ul li:nth-child(9) {
            width: 50px;
            height: 50px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }
        .wrap ul li:nth-child(10) {
            width: 75px;
            height: 75px;
            left: 90%;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }
        .zi{
            float: left;
            padding: 0;
        }
        form{
           position: absolute;
           top:80px;
           left: 560px;
        }

   

        
    </style>
</head>
<body>
    <div class="wrap">
    <div class="container">
<div class="stars" id="stars">
    </div>
    <script>
        window.onload = function () {
            var starCount = 1000;
            var distance = 800;
            var stars = document.getElementById('stars')
            for (let index = 0; index < starCount; index++) {
                let speed = 0.1 + (Math.random() * 1);
                let thisDiscance = distance + (Math.random() * 300)
                stars.innerHTML += `<div class="star" id="star${index}" style='transform-origin:0 0 ${thisDiscance}px;transform:translate3d(0,0,-${thisDiscance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg)' scale(${speed},${speed})>
                     </div>`;
            }
        }
    </script>

        <h1 style="color: white; margin: 0; text-align: center">Modify user information</h1>
    <div>
        <div class="zi">
        <br><br><br><br><br>
        <p>ID</p>
        <br><br>
        <p>Username</p>
        <br><br>
        <p>Password</p>
        <br><br>
        <p>Phone number</p>
        <br><br>
        <p>Set as administrator?</p>
        <br><br>
        </div>
        <form  th:action="@{/admiUpdateUser}" th:method="post" style="margin-top:110px">
          <input type="text" name="userid" th:value="${user.userid}" placeholder="ID"/>  
          <input type="text" name="username" th:value="${user.username}" placeholder="Username"/>
          <input type="text" name="password" th:value="${user.password}" placeholder="Password"/>
          <input type="text" name="phone" th:value="${user.phone}" placeholder="Phone number"/>
          <input type="text" name="administrator" th:value="${user.administrator}" placeholder="Set as administrator?"/>
          <input type="submit" value="Submit" />
        </form>
    </div>


     
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <div class="text" style=" text-align:center; color: black;">©2005-2016 XX市XXXX科技有限公司 版权所有 X ICP备00000000号-1</div>

    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>
 
